import { PureComponent } from "react"
import { isNull, filterTemplate, calcField } from "../../utils/helper"
import F2 from "@antv/f2/lib/index-all"
import MAction from '../MAction/MAction';
interface Props {
  list: any[],
  title?: any,
  total?: any,
  desc?: any,
  color?: any,
  colors?: any,
  thresholds?: any,
  height?: any,
  componentStyle?: object,
  event_key?: string
}
interface State {
  
}
export default class MiPie extends PureComponent<Props, State> {
  chart: any;
  canvasId = Math.random() + new Date().getTime() + "";
  wrapper: any;
  public state: State = {
    
  }
  renderText = (item, isHtml = true) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { list } = this.props;
      let { text, style } = item;
      text = calcField(text, list);
      if (isHtml) {
        return (
          <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
        )
      }
      else {
        return text;
      }
    }
  }

  componentWillReceiveProps(nextProps) {
    let { list: oldList } = this.props;
    let { list: newList } = nextProps;
    if (!_.isEqual(oldList, newList)) {
      setTimeout(() => {
        this.renderChart(nextProps)
      })
    }
  }
  renderChart(nextProps) {
    this.chart.clear();
    let props = nextProps || this.props;
    let { dataset_key, list, percent } = props;
    if (!isNull(dataset_key) && isNull(list)) {
      return;
    }
    percent = calcField(percent, list);
    
    let { title, total, desc, color, colors, thresholds } = this.props;
    if (isNull(color)) {
      color = "#1890ff";
    }
    if (percent > 100) {
      if (isNull(colors) || isNull(thresholds)) {

      }
      else {
        thresholds = thresholds.toString().split(",");
        if (percent > thresholds[thresholds.length - 1]) {
          color = colors[thresholds.length - 1]
        }
        else {
          thresholds.map((item, key) => {
            if (key > 0) {
              if (percent > thresholds[key - 1] && percent <= item) {
                color = colors[key - 1]
              }
            }
          })
        }
      }
    }
    let strokeColor = "#ccc";
    if (percent > 100) {
      strokeColor = "#1890ff";
      percent = percent % 100;
    }
    this.chart.source(
      [{
        x: '1',
        y: percent * 1
      }],
      {
        y: {
          max: 100,
          min: 0
        }
      });
    this.chart.axis(false);
    this.chart.tooltip(false);
    this.chart.coord('polar', {
      transposed: true,
      innerRadius: 0.7,
      radius: 1
    });
    this.chart.guide().arc({
      start: [0, 0],
      end: [1, 99.98],
      top: false,
      style: {
        lineWidth: 9,
        stroke: strokeColor
      }
    });
    this.chart.interval().position('x*y').size(10).color(color);
    // .animate({
    //   appear: {
    //     duration: 600
    //   }
    // });
    let titleHtml = this.renderText(title, false);
    if (!isNull(titleHtml)) {
      titleHtml = '<p style="font-size: 16px;color:#666;margin:0;">' + titleHtml + '</p>'
    }
    else {
      titleHtml = ""
    }

    let totalHtml = this.renderText(total, false);
    if (!isNull(totalHtml)) {
      totalHtml = '<p style="font-size: 32px;margin:0;margin:10px 0;">' + totalHtml + '</p>'
    }
    else {
      totalHtml = ""
    }

    let descHtml = this.renderText(desc, false);
    if (!isNull(descHtml)) {
      descHtml = '<p style="color:#999;font-size:16px;">' + descHtml + '</p>'
    }
    else {
      descHtml = ""
    }
    if (!(isNull(titleHtml) && isNull(totalHtml))) {
      this.chart.guide().html({
        position: ['50%', '50%'],
        html: '<div id="a" style="color: #000;white-space: nowrap;text-align:center;">' + titleHtml + totalHtml + descHtml + '</div>'
      });
    }

    this.chart.render();
  }
  componentDidMount() {
    let { width } = this.wrapper.getBoundingClientRect();
    let { list, height } = this.props;
    if (isNull(height)) {
      height = window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
    }
    this.chart = new F2.Chart({
      id: this.canvasId,
      // width: window.innerWidth,
      width: width,
      height: height,
      pixelRatio: window.devicePixelRatio
    });
    this.renderChart(list);
  }
  render() {
    let { componentStyle } = this.props;
    return (
      <div ref={e => this.wrapper = e} style={{ ...componentStyle }} onClick={() => {
        MAction({ ...this.props }, this.props.event_key);
      }}>
        <div className="chart-wrapper">
          <canvas id={this.canvasId} />
        </div>
      </div>
    )
  }
}

/*
// 环形进度条 中间可以有文字
var config ={
  "component_type":"mi-miniarea",
  "color":"",//图标颜色
  "height":100,//图标的高度
  "dataset_key":"",//数据源
  "percent":88,//{{percent}}
  "title":{//第一行文字
    "text":"本月用电量",
    "style":{

    }
  },
  "total":{//第二行文字
    "text":"{{total}}",
    "style":{

    }
  },
  "desc":{//第三行文字
    "text":"{{desc}}",
    "style":{

    }
  },
  "componentStyle":{},
  "event_key":""
}

*/